import {browsingArticleList} from '@/api/user.js';
import MPagination from '@/layout/components/MPagination/index.jsx'
import React, {useEffect, useState} from 'react'
import styled from 'styled-components'
import { EssayItem} from '@/views/personalCenter/components/index.jsx'
import MEmpty from '@/layout/components/MEmpty/index.jsx'
import {Spin} from 'antd'

const Container = styled.div`
    height: 100%;

    .list {
        display: grid;
        grid-template-columns: repeat(1, 1161px);
        gap: 30px 0px;
        margin-bottom: 40px;
    }

`
export default function BrowsingEssay() {
  const [curPagination, setCurPagination] = useState({
    pageNumber: 1, total: 0, pageSize: 15
  })
  const [list, setList] = useState([])
  const [loading, setLoading] = useState(false)

  function handlePageChange(pageNumber, pageSize) {
    setCurPagination((state) => {
      return {
        pageNumber,
        pageSize,
        total: state.total
      }
    })
  }

  async function getParticipatedActivityList() {
    try {
      setLoading(true)
      const res = await browsingArticleList(curPagination.pageNumber, curPagination.pageSize)
      if (res.result.status_info.status_code !== 100) {
        setList([])
        return
      }
      setList(res.result.list)
      setCurPagination({
        ...curPagination,
        total: res.result.page_info.total_item_num
      })
    } finally {
      setLoading(false)
    }

  }

  useEffect(() => {
    getParticipatedActivityList()
  }, [curPagination.pageNumber, curPagination.pageSize])
  return (<>
    <Container>
      {loading && <div style={{display: 'flex', justifyContent: 'center', alignItems: 'center', height: '100%'}}>
        <Spin tip={"拼命加载中"}>
          <div style={{width: '100px'}}></div>
        </Spin>
      </div>}
      {
          (!loading && list.length > 0) && <div>
            <div className={'list'}>
              {
                list.map((item, index) => <EssayItem detail={item} key={index}></EssayItem>)
              }
            </div>
            <MPagination curPagination={curPagination} onChange={handlePageChange}></MPagination>
          </div>

      }

      {(!loading && list.length === 0) && <MEmpty/>}
    </Container>
  </>)
}